<template>
  <view class="container">
    <!-- 分类容器 -->
    <u-row gutter="0">
      <!-- 左侧分类导航 -->
      <u-col span="3">
        <view class="left-nav">
          <u-list
            :scrollable="true"
            :showScrollbar="false"
          >
            <u-cell
              v-for="(item, index) in categories"
              :key="item.icid"
              :title="item.description"
              :class="['nav-item', activeIndex === index ? 'active' : '']"
              @click="click(item)"
            ></u-cell>
          </u-list>
        </view>
      </u-col>

      <!-- 右侧内容区域 -->
      <u-col span="9">
        <view class="right-content">
          <!-- 子分类展示 -->
          <!-- <view v-if="subCategories.length" class="sub-categories">
            <u-grid
              :col="3"
              :border="false"
            >
              <u-grid-item
                v-for="sub in subCategories"
                :key="sub.id"
                @click="handleSubCategoryClick(sub)"
              >
                <u-icon
                  :name="sub.icon"
                  size="28"
                ></u-icon>
                <text class="sub-title">{{ sub.name }}</text>
              </u-grid-item>
            </u-grid>
          </view> -->

          <!-- 商品列表 -->
          <view class="goods-list">
            <u-list>
              <u-cell
                v-for="goods in goods"
                :key="goods.gid"
                :title="goods.gname"
                :value="'¥' + goods.price"
				@click="handle(goods)"
              >
                <u-image
                  slot="icon"
                  :src="  baseurl + goods.gimg.split(',')[0]"
                  width="80px"
                  height="80px"
                  mode="aspectFill"
                ></u-image>
              </u-cell>
            </u-list>
          </view>
        </view>
      </u-col>
    </u-row>
  </view>
</template>

<script>
	
import { listIcon } from '../API/Icon/icon';
import { getGoods } from '../API/goods/goods';
import { API_BASE_URL } from '../../utils/appConfig';
export default {
  data() {
    return {
      activeIndex: 0,      // 当前选中分类索引
      categories: [],      // 分类数据
	  baseurl:API_BASE_URL,
	  goods:[],
	  query:{
	  	publishstate:1,
	  	icid:7
	  },
    };
  },
  onLoad() {
    // 模拟数据加载
	this.getIconlist()
	this.getgoodsList()
  },
  methods: {
	  getIconlist(){
	  		listIcon().then(res =>{
	  			this.categories = res.data.rows
	  		})
	  	},
		getgoodsList(){
			getGoods(this.query).then(res =>{
				this.goods = res.data;
				console.log(this.goods)
			})
		},
	  click(item) {
	  		console.log(item.icid)
	  		this.query.icid = item.icid;
	  		this.goods = []
	  		this.getgoodsList()
	  		this.$refs.uToast.success(`点击了第${item.id}`)
	  },
	  

    // 子分类点击
    handle(item) {
    uni.$u.route('pages/detail/detail',{id:item.gid})
      // 这里可以跳转到具体子分类页面或过滤商品
    }
  }
};
</script>
<style scoped>
.container {
  height: 100vh;
  background-color: #f8f8f8;
}

.left-nav {
  height: 100vh;
  background-color: #fff;
}

.nav-item {
  padding: 20rpx 0;
  text-align: center;
  transition: all 0.3s;
}

.nav-item.active {
  background-color: #f8f8f8;
  color: #2979ff;
  font-weight: bold;
}

.right-content {
  padding: 20rpx;
  height: 100vh;
  box-sizing: border-box;
}

.sub-title {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.goods-list {
  margin-top: 30rpx;

}

</style>